<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 2px solid black;
            /* width: 400px;
            height: 400px; */
            /* 注意：通过css修改画布的大小，本质是对原本画布宽300高150大小的拉伸，
            不是真正的修改画布大小，会导致绘制的图形变形
            因此画布大小的设置需要通过元素属性进行修改 */
        }
    </style>
</head>

<body>
    <!-- 一、创建画布元素 -->
    <canvas width="400" height="400"></canvas>
    <!-- 默认画布尺寸：300*150   -->
    <!-- 矢量图 -->

    <script>
        // 二、获取元素节点
        let canvas = document.getElementsByTagName("canvas")[0];

        // 三、创建context对象，该对象是包含了所有绘制图形的属性和方法
        let context = canvas.getContext("2d");
        console.log(context);

        // 四、js绘制图形
        // 1.直线
        // 起点
        // context.moveTo(10,20);//10表示x轴，20表示y轴
        // // 终点
        // context.lineTo(100,200);
        // context.lineTo(200,200);
        // context.lineTo(300,300);
        // // 描线
        // context.stroke();

        // 2.两条对角线
        // context.moveTo(0,0);
        // context.lineTo(400,400);

        // context.moveTo(400,0);
        // context.lineTo(0,400);

        // context.strokeStyle="red";//设置描线颜色
        // context.stroke();

        // 3.空闲矩形
        // context.strokeStyle="red";//设置描线颜色
        // context.strokeRect(20,30,100,50);//20,30：表示矩形左上角的坐标；100表示宽度；50表示高度

        // 4.实心矩形
        // context.fillStyle="red";//设置填充颜色
        // context.fillRect(100,100,100,50);

        // 5.圆形(圆弧形)
        // context.arc(200,200,100,0,90/180*Math.PI);
        // 200,200:表示圆心坐标；100表示半径；0表示起始弧度（3点钟是起点）；
        // 角度制转弧度制：2PI=360°   1PI=180°  角度/180*PI

        // context.arc(200,200,100,0,2*Math.PI);
        // context.stroke();//描线绘制  空心圆
        // context.fill();//填充绘制 实心圆

        // 6.三角形（描点连线）
        // context.moveTo(20,20);
        // context.lineTo(200,200);
        // context.lineTo(20,300);
        // context.closePath();//闭合路径
        // context.stroke();//空心三角形
        // context.fill();//实心三角形

        // 7.二次方曲线（一个控制点）
        // context.moveTo(30,30);//曲线起点
        // context.quadraticCurveTo(50,75,300,30);//50,75:表示控制点坐标  300,30：结束点坐标
        // context.quadraticCurveTo(250,275,300,30);//50,75:表示控制点坐标  300,30：结束点坐标
        // context.stroke();

        // 8.三次方曲线（两个控制点）
        // context.moveTo(20,200);//曲线起点
        // context.bezierCurveTo(50,50,250,50,350,20);
        //50,50:表示第一个控制点坐标；250,50：表示第二个控制点坐标；350,20：结束点坐标
        // context.bezierCurveTo(50,50,350,350,350,20);

        // context.stroke();

        // context.beginPath();//开始绘制，提笔
        // context.moveTo(90,20);
        // context.lineTo(200,20);
        // context.stroke();

        // 9.清空指定范围的画布
        // context.clearRect(50,50,200,100);
        // 50,50:表示矩形左上角坐标
        // 200：矩形宽度
        // 100：矩形高度
        // context.clearRect(0,0,400,400);

        // 10.保持和回复样式设置
        // context.strokeStyle="green";
        // context.fillStyle="red";
        // context.fillRect(10,10,100,50);
        // context.strokeRect(10,10,100,50);

        // context.save();//保持样式设置

        // context.strokeStyle="yellow";
        // context.fillStyle="pink";
        // context.arc(200,200,50,0,2*Math.PI);
        // context.stroke();
        // context.fill();

        // context.restore();//回复样式设置

        // context.fillRect(300,300,50,50);
        // context.strokeRect(300,300,50,50);


        // 11.修改画布原点，默认原点是左上角
        // context.fillRect(0,0,50,50);
        // context.translate(200,200);
        // context.fillRect(0,0,50,50);

        // 练习：在画布上画5个小球横着排列
        // 方法一：修改每一个圆的圆心位置
        // let x=50;
        // for (let i = 0; i < 5; i++) {
        //     context.arc(x, 50, 30, 0, 2 * Math.PI);
        //     context.fill();
        //     x+=70;
        // }

        // 方法二：修改每一个圆的画布原点
        // for(let i=0;i<5;i++){
        //     context.beginPath();//开始绘制
        //     context.arc(50, 50, 30, 0, 2 * Math.PI);
        //     context.fill();
        //     context.closePath();//闭合路径
        //     context.translate(70,0);
        // }

        // 12.旋转画布:旋转中心是画布原点；旋转角度要转成弧度制
        // context.translate(200,200);
        // context.fillRect(0,0,200,100);
        // context.rotate(45/180*Math.PI);//旋转，角度转弧度制
        // context.fillStyle="red";
        // context.fillRect(0,0,200,100);

        // 练习：在画布上画10个小球，围绕一圈
        // context.translate(200,200);
        // for (let i = 0; i < 10; i++) {
        //     context.beginPath();
        //     context.arc(-150, 0, 10, 0, 2 * Math.PI);
        //     context.closePath();
        //     context.fill();
        //     context.rotate(36/180*Math.PI);
        // }

        // 13.图形缩放
        // context.scale(2,2);//第一个参数表示x轴的缩放倍数，第二个参数表示y轴的缩放倍数
        // context.fillRect(0,0,100,100);

        // 14.图形的组合与裁剪
        // context.fillRect(50,50,150,80);//目标图像
        // context.globalCompositeOperation="xor";
        // context.arc(200,200,150,0,2*Math.PI);//源图像
        // context.fillStyle="red";
        // context.fill();

        // 15.线条样式
        // context.moveTo(50,50);
        // context.lineTo(250,250);
        // context.lineTo(0,150);
        // context.strokeStyle="red";//线条颜色
        // context.lineWidth=10;//线条粗细
        // context.lineCap="square";//线条端点样式  round：圆角
        // context.lineJoin="miter";//线条连接处样式
        // context.miterLimit=2;//线条之间连接处的长度
        // context.stroke();

        // 16.引入图片，相当于把图片做为背景图进行填充
        // 创建img对象
        // let img = new Image();
        // // 设置图片路径
        // img.src = "./start.png";
        // img.style.backgroundSize="10px 10px";
        // console.log(img.style);
       
        // img.onload = function () {
        //     // 把图片作为背景
        //     let ptn = context.createPattern(img, "repeat");
        //     context.fillStyle = ptn;
        //     // 绘制图形
        //     context.fillRect(50, 50, 150, 100);
        // }


        // 17.绘制文字
        // context.font="italic 30px 微软雅黑";
        // // 实心文本
        // context.fillText("hello world",50,50);
        // context.fillText("hello world",50,150,100);

        // // 空心文本
        // context.strokeText("hello world",50,250,100);

        // console.log(context.measureText("hello world"));

        // 18.引入图片
        // let img=new Image();//创建图片对象
        // img.src="./start.png";//引入图片地址
        // img.onload=function(){
        //     context.drawImage(img,50,50,100,100,30,30,45,45);//绘制图片
        // }

        // 练习：裁剪用户头像
        // let img=new Image();//创建图片对象
        // img.src="./start.png";//引入图片地址
        // img.onload=function(){
        //     context.drawImage(img,150,150,100,100);//绘制图片
        // }
        // context.arc(200,200,30,0,2*Math.PI);
        // context.stroke();
        // context.clip();
        // //裁剪画布成任意形状，之后所有的内容只有在改形状区域才能显示，因为其他区域都被裁掉了
        // // context.fillRect(0,0,200,200);



    </script>
</body>

</html>